<script setup>
import draggable from 'vuedraggable';
import Sortable from 'sortablejs'
const elTableRef = ref();
const props = defineProps({
  formData: {type: Object},
})
import {nextTick, onMounted, ref, watchEffect} from "vue";
const tableData = ref([
  {
    name: "图文问诊",
    enable: false,
    price_first: "",
    price: "",
    display: "",
    time: ""
  },
  {
    name: "视频问诊",
    enable: false,
    price_first: "",
    price: "",
    display: "",
    time: ""
  },
  {
    name: "特需问诊",
    enable: false,
    price_first: "",
    price: "",
    display: "",
    time: ""
  },
  {
    name: "是否快速开方",
    enable: false,
    isHide: true
  }])
const dragging = ref(true)
watchEffect(() => {
  if (props.formData) {
    // console.log("props.formData", props.formData)
    tableData.value[0].enable = props.formData?.is_graphic === 1
    tableData.value[0].price = props.formData?.graphic_price
    tableData.value[0].price_first = props.formData?.graphic_price_first || null
    tableData.value[0].display = props.formData?.graphic_display || null
    tableData.value[0].time = props.formData?.graphic_time || null

    tableData.value[1].enable = props.formData?.is_video === 1
    tableData.value[1].price = props.formData?.video_price
    tableData.value[1].price_first = props.formData?.video_price_first
    tableData.value[1].display = props.formData?.video_display
    tableData.value[1].time = props.formData?.video_time

    tableData.value[2].enable = props.formData?.is_special === 1
    tableData.value[2].price = props.formData?.special_price
    tableData.value[2].price_first = props.formData?.special_price_first
    tableData.value[2].display = props.formData?.special_display
    tableData.value[2].time = props.formData?.special_time

    tableData.value[3].enable = props.formData?.is_quick_drug === 1
  }
})
const setSort = () => {
  const el = elTableRef?.value?.$el.querySelector('tbody')
  new Sortable(el, {
    animation: 180,
    delay: 0,
    onEnd: (e) => {
      const _tableRow = tableData.value;
      const targetRow = _tableRow.splice(e.oldIndex, 1)
      _tableRow.splice(e.newIndex, 0, targetRow[0]);
      tableData.value = [];  // 清空数组
      nextTick(() => {
        tableData.value = [..._tableRow];  // 重新赋值
      });
    },
  })
}

onMounted(() => {
  setSort()
})
defineExpose({
  tableData
})
</script>

<template>
    <el-table ref="elTableRef" :data="tableData">
      <el-table-column prop="name" label="问诊类型" />
      <el-table-column prop="date" label="是否启用">
        <template #default="scope">
          <el-checkbox v-model="scope.row.enable"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="初诊费用（元/次）" width="160">
        <template #default="scope">
          <el-input-number v-if="!scope.row.isHide" v-model="scope.row.price_first" controls-position="right"  size="small"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="复诊费用（元/次）" width="160">
        <template #default="scope">
          <el-input-number v-if="!scope.row.isHide" v-model="scope.row.price" controls-position="right" size="small"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="患者端展示价格" width="180">
        <template #default="scope">
          <el-radio-group v-if="!scope.row.isHide" v-model="scope.row.display" size="small">
            <el-radio :value="1">初诊</el-radio>
            <el-radio :value="2">复诊</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="通话时长设置" width="180">
        <template #default="scope">
          <el-radio-group v-if="!scope.row.isHide" v-model="scope.row.time" size="small">
            <el-radio :value="1">无限制</el-radio>
            <el-radio :value="2">十分钟</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
.el-input-number--small {
  width: 100px;
}
::v-deep .el-input {
  height: auto !important;
}
</style>
